[Part 2] 介紹 Grid 外容器屬性

• grid-template
• grid-auto-rows / grid-auto-columns
• grid-auto-flow
• column-gap / row-gap
• gap

grid-template

為以下 3 個屬性組成：

• grid-template-area
• grid-template-columns
• grid-template-rows

語法

grid-template: 
	none|grid-template-rows / grid-template-columns|grid-template-areas|initial|inherit;

VALUES

• none：預設值，不指定行與列的長寬。
• grid-template rows / grid-template-columns：指定行與列的長寬
• grid-template-areas：使用網格元素的名稱

CodePen 範例

#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template:
    [header-left] "head head" 30px [header-right]
    [main-left] "nav  main" 1fr [main-right]
    [footer-left] "nav  foot" 30px [footer-right]
    / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-area: foot;
}

先從數字開始，有 30px，1fr，30px，120px 和 1fr。

/ 可以看成分隔線，/ 前面的數字表示 grid-template-rows，/ 前面的數字表示 grid-template-columns，以此例來說表示 120px 以前的 3 個數字(30px，1fr，30px) 為 row 的高度， 120px 和 1fr 為 column 寬度。

以下為示意圖：

再來看中刮弧的部分， 可以看到 [header-left] 30px [header-right]，[main-left] 1fr [main-right]，[footer-left] 30px [footer-right]，表示在 30px 的左右分別為 [header-left] 和 [header-right]，在 1fr 的左右分別為 [main-left] 和 [main-right]，在 30px 的左右分別為 [footer-left] 和 [footer-right]。

以下為示意圖。

最後就是文字的部分，head head 對應第一個 row 的 2 個格子，nav main 第二個 row 的 2 個格子， nav foot 對應第三個 row 的 2 個格子。

以下為示意圖。

此範例有搭配 grid area，所以 grid-area: head 表示background-color: lime。grid-area: nav; 表示 background-color: lightblue; 。grid-area: main; 表示 background-color: yellow; 。grid-area: foot; 表示 background-color: red;

grid-auto-rows / grid-auto-columns

使用 grid-row、grid-column 在 grid-template 以外的地方設定 grid-item，指定實際擺放的位置，並使用
grid-auto-rows / grid-auto-columns 設定大小。

.container {
  grid-template-columns: 60px 60px;
  grid-template-rows: 90px 90px;
  grid-auto-columns: 60px;
  grid-auto-rows: 60px;
}

.item-a {
  grid-column: 2 / 4;
  grid-row: 3 / 5;
}

grid-auto-flow

當 grid item 在未指定區域時所排列的方向。

• row：表示從左到右先排
• column：表示優從上到下先排
• dense：表示後續元素能自動排到前面的空隙，有可能會破壞元素定義順序和提高可理解性成本，須謹慎使用

圖片取自：CSS進階：Grid格線佈局

• row
  
• column
  

column-gap / row-gap

gap 也可以稱為 gutter

• column-gap：column 和 column 之間的距離
• row-gap：row 和 row 之間的距離

.container {
	column-gap: 15px;
	row-gap: 30px;
}

gap

gap 為 column-gap、row-gap 合併後的縮寫。

.container {
	gap: 15px 30px
}

相等於

.container {
    column-gap: 15px;
	row-gap: 30px;
}

參考資料：
CSS進階：Grid格線佈局